<template>
	<view class="container">
		<!-- 顶部进度区 -->
		<view class="header-section">
			<!-- 日期选择器 -->
			<view class="date-selector">
			<!-- 	<uni-icons type="left" size="20" color="#666" @click="changeDate(-1)"
					class="cursor-pointer"></uni-icons> -->
				<text class="date-text">{{ formatDate(currentDate) }}</text>
		<!-- 		<uni-icons type="right" size="20" color="#666" @click="changeDate(1)"
					class="cursor-pointer"></uni-icons> -->
			</view>
			<!-- 圆形进度条 -->
			<view class="progress-circle">
				<view class="circle-bg">
					<view class="circle-progress" :style="{ transform: `rotate(${progressAngle}deg)` }"></view>
					<view class="circle-inner">
						<text class="current-calories">{{ currentCalories }}</text>
						<text class="target-calories">/ {{ targetCalories }} kcal</text>
					</view>
				</view>
			</view>
			<!-- 剩余热量提示 -->
			<view class="remaining-calories">
				<text class="remaining-text">
					{{ remainingCalories > 0 ? `还需摄入 ${remainingCalories} 卡路里` : `已超出 ${Math.abs(remainingCalories)} 卡路里` }}
				</text>
			</view>
		</view>
		<!-- 数据展示区 -->
		<view class="content-section">
			<!-- 图表卡片 -->
<!-- 			<view class="chart-card">
				<view class="card-header">
					<text class="card-title">近7天热量趋势</text>
				</view>
				<scroll-view scroll-x="true" class="chart-scroll">
					<view class="chart-container">
						<view class="chart-item" v-for="(item, index) in chartData" :key="index">
							<view class="chart-bar">
								<view class="bar-fill" :style="{ height: `${(item.calories / 2500) * 100}%` }"></view>
							</view>
							<text class="chart-date">{{ item.date }}</text>
							<text class="chart-value">{{ item.calories }}</text>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- 今日食物记录 -->
			<view class="food-records">
				<view class="section-header">
					<text class="section-title">今日记录</text>
					<text class="record-count">{{ todayRecords.length }} 项</text>
				</view>
				<view class="food-list">
					<view class="food-item" v-for="(food, index) in todayRecords" :key="index">
						<image class="food-image" :src="food.image" mode="aspectFill"></image>
						<view class="food-info">
							<text class="food-name">{{ food.name }}</text>
							<text class="food-portion">{{ food.portion }}</text>
							<text class="food-time">{{ food.time }}</text>
						</view>
						<view class="food-calories">
							<text class="calories-value">{{ food.calories }}</text>
							<text class="calories-unit">kcal</text>
						</view>
						<uni-icons type="trash" size="18" color="#ff4444" @click="deleteFood(index)"
							class="cursor-pointer"></uni-icons>
					</view>
				</view>
				<view class="empty-state" v-if="todayRecords.length === 0">
					<uni-icons type="plus-filled" size="48" color="#ddd"></uni-icons>
					<text class="empty-text">暂无记录，点击下方按钮添加食物</text>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<navigator url="/pages/index2" class="bar-item cursor-pointer">
				<uni-icons type="calendar" size="24" color="#666"></uni-icons>
				<text class="bar-text">历史</text>
			</navigator>
			<view class="add-button cursor-pointer" @click="showAddPanel">
				<uni-icons type="plus" size="32" color="#fff"></uni-icons>
			</view>
			<navigator url="/pages/index1" class="bar-item cursor-pointer">
				<uni-icons type="gear" size="24" color="#666"></uni-icons>
				<text class="bar-text">设置</text>
			</navigator>
		</view>
		<!-- 添加食物面板 -->
		<view class="add-panel" :class="{ 'show': showAdd }">
			<view class="panel-header">
				<text class="panel-title">添加食物</text>
				<uni-icons type="close" size="24" color="#666" @click="hideAddPanel" class="cursor-pointer"></uni-icons>
			</view>
			<view class="scroll-content">
				<view class="food-categories">
					<view class="category-section" v-for="(category, categoryIndex) in foodCategories" :key="categoryIndex">
						<text class="section-subtitle">{{ category.name }}</text>
						<view class="food-grid">
							<view class="grid-item cursor-pointer" v-for="(food, index) in category.foods" :key="index"
								@click="selectFood(food)">
								<image class="grid-image" :src="food.image" mode="aspectFill"></image>
								<text class="grid-name">{{ food.name }}</text>
								<text class="grid-calories">{{ food.calories }}kcal/{{ food.unit }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="portion-section" v-if="selectedFood">
					<text class="section-subtitle">份量调节</text>
					<view class="portion-control">
						<text class="portion-label">{{ selectedFood.name }}</text>
						<view class="portion-slider">
							<slider class="slider" :value="portionValue" @change="onPortionChange" min="0.1" max="5"
								step="0.1" />
							<text class="portion-value">{{ portionValue }}份
								({{ Math.round(selectedFood.calories * portionValue) }}kcal)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="panel-footer" v-if="selectedFood">
				<button class="confirm-btn cursor-pointer" @click="addFood">确认添加</button>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="overlay" :class="{ 'show': showAdd }" @click="hideAddPanel"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				targetCalories: 2000,
				currentCalories: 0,
				showAdd: false,
				selectedFood: null,
				portionValue: 1,
				todayRecords: [],
				currentDate: new Date(),
				foodCategories: [{
						name: '主食',
						foods: [{
								name: '米饭',
								calories: 130,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20bowl%20of%20steamed%20white%20rice%20on%20a%20clean%20white%20plate%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=1&orientation=squarish'
							},
							{
								name: '面包',
								calories: 265,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20slice%20of%20fresh%20white%20bread%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=5&orientation=squarish'
							},
							{
								name: '面条',
								calories: 110,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20bowl%20of%20cooked%20noodles%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=7&orientation=squarish'
							},
							{
								name: '馒头',
								calories: 223,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20steamed%20white%20Chinese%20mantou%20bun%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=10&orientation=squarish'
							},
							{
								name: '燕麦',
								calories: 389,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20bowl%20of%20rolled%20oats%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=11&orientation=squarish'
							},
							{
								name: '玉米',
								calories: 86,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20corn%20on%20the%20cob%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=12&orientation=squarish'
							}
						]
					},
					{
						name: '蛋奶类',
						foods: [{
								name: '鸡蛋',
								calories: 155,
								unit: '1个',
								image: 'https://readdy.ai/api/search-image?query=A%20fresh%20whole%20egg%20and%20one%20cracked%20egg%20showing%20yolk%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=2&orientation=squarish'
							},
							{
								name: '牛奶',
								calories: 120,
								unit: '200ml',
								image: 'https://readdy.ai/api/search-image?query=A%20glass%20of%20fresh%20white%20milk%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=4&orientation=squarish'
							},
							{
								name: '酸奶',
								calories: 100,
								unit: '200g',
								image: 'https://readdy.ai/api/search-image?query=A%20cup%20of%20creamy%20yogurt%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=8&orientation=squarish'
							},
							{
								name: '奶酪',
								calories: 402,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20slice%20of%20cheese%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=13&orientation=squarish'
							},
							{
								name: '鹌鹑蛋',
								calories: 158,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20quail%20eggs%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=14&orientation=squarish'
							}
						]
					},
					{
						name: '水果',
						foods: [{
								name: '香蕉',
								calories: 89,
								unit: '1根',
								image: 'https://readdy.ai/api/search-image?query=A%20ripe%20yellow%20banana%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=3&orientation=squarish'
							},
							{
								name: '苹果',
								calories: 52,
								unit: '1个',
								image: 'https://readdy.ai/api/search-image?query=A%20fresh%20red%20apple%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=6&orientation=squarish'
							},
							{
								name: '橙子',
								calories: 47,
								unit: '1个',
								image: 'https://readdy.ai/api/search-image?query=A%20fresh%20orange%20fruit%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=9&orientation=squarish'
							},
							{
								name: '草莓',
								calories: 32,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20red%20strawberries%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=15&orientation=squarish'
							},
							{
								name: '葡萄',
								calories: 69,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20purple%20grapes%20cluster%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=16&orientation=squarish'
							},
							{
								name: '西瓜',
								calories: 30,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=A%20slice%20of%20fresh%20watermelon%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=17&orientation=squarish'
							}
						]
					},
					{
						name: '肉类',
						foods: [{
								name: '鸡胸肉',
								calories: 165,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Grilled%20chicken%20breast%20fillet%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=18&orientation=squarish'
							},
							{
								name: '猪肉',
								calories: 242,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20pork%20meat%20slice%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=19&orientation=squarish'
							},
							{
								name: '牛肉',
								calories: 250,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20beef%20steak%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=20&orientation=squarish'
							},
							{
								name: '羊肉',
								calories: 294,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20lamb%20meat%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=21&orientation=squarish'
							}
						]
					},
					{
						name: '海鲜',
						foods: [{
								name: '三文鱼',
								calories: 208,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20salmon%20fillet%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=22&orientation=squarish'
							},
							{
								name: '虾',
								calories: 99,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20shrimp%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=23&orientation=squarish'
							},
							{
								name: '鱿鱼',
								calories: 92,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20squid%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=24&orientation=squarish'
							}
						]
					},
					{
						name: '蔬菜',
						foods: [{
								name: '西兰花',
								calories: 34,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20broccoli%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=25&orientation=squarish'
							},
							{
								name: '胡萝卜',
								calories: 41,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20carrot%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=26&orientation=squarish'
							},
							{
								name: '青椒',
								calories: 20,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20green%20bell%20pepper%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=27&orientation=squarish'
							},
							{
								name: '土豆',
								calories: 77,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20potato%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=28&orientation=squarish'
							},
							{
								name: '番茄',
								calories: 18,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20tomato%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=29&orientation=squarish'
							}
						]
					},
					{
						name: '坚果',
						foods: [{
								name: '花生',
								calories: 567,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20peanuts%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=30&orientation=squarish'
							},
							{
								name: '杏仁',
								calories: 579,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20almonds%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=31&orientation=squarish'
							},
							{
								name: '核桃',
								calories: 654,
								unit: '100g',
								image: 'https://readdy.ai/api/search-image?query=Fresh%20walnuts%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=32&orientation=squarish'
							}
						]
					},
					{
						name: '饮品',
						foods: [{
								name: '可乐',
								calories: 42,
								unit: '100ml',
								image: 'https://readdy.ai/api/search-image?query=Glass%20of%20cola%20with%20ice%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=33&orientation=squarish'
							},
							{
								name: '橙汁',
								calories: 45,
								unit: '100ml',
								image: 'https://readdy.ai/api/search-image?query=Glass%20of%20orange%20juice%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=34&orientation=squarish'
							},
							{
								name: '咖啡',
								calories: 1,
								unit: '100ml',
								image: 'https://readdy.ai/api/search-image?query=Cup%20of%20black%20coffee%2C%20photorealistic%20food%20photography%2C%20centered%20composition%2C%20soft%20lighting%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20isolated%20on%20white%20background&width=200&height=200&seq=35&orientation=squarish'
							}
						]
					}
				]
			}
		},
		computed: {
			remainingCalories() {
				return this.targetCalories - this.currentCalories;
			},
			progressAngle() {
				const progress = this.currentCalories / this.targetCalories;
				return Math.min(progress * 360, 360);
			}
		},
		onLoad() {
			const savedRecords = uni.getStorageSync('todayRecords');
			if (savedRecords) {
				this.todayRecords = JSON.parse(savedRecords);
				this.currentCalories = this.todayRecords.reduce((total, food) => total + food.calories, 0);
			}
			const savedTarget = uni.getStorageSync('targetCalories');
			if (savedTarget) {
				this.targetCalories = Number(savedTarget);
			}
		},
		onShow() {
			// 每次显示页面时重新加载数据
			const savedRecords = uni.getStorageSync('todayRecords');
			if (savedRecords) {
				this.todayRecords = JSON.parse(savedRecords);
				this.currentCalories = this.todayRecords.reduce((total, food) => total + food.calories, 0);
			}
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}年${month}月${day}日`;
			},
			changeDate(offset) {
				// 你可以根据需要实现日期切换逻辑
			},
			deleteFood(index) {
				const deletedFood = this.todayRecords[index];
				this.currentCalories -= deletedFood.calories;
				this.todayRecords.splice(index, 1);
				uni.setStorageSync('todayRecords', JSON.stringify(this.todayRecords));
				
				// 同时从历史数据中删除
				this.deleteFromHistory(deletedFood);
			},
			showAddPanel() {
				this.showAdd = true;
			},
			hideAddPanel() {
				this.showAdd = false;
				this.selectedFood = null;
				this.portionValue = 1;
			},
			selectFood(food) {
				this.selectedFood = food;
			},
			onPortionChange(e) {
				this.portionValue = Number(e.detail.value);
			},
			addFood() {
				const food = this.selectedFood;
				if (food) {
					const newRecord = {
						name: food.name,
						calories: Math.round(food.calories * this.portionValue),
						portion: `${this.portionValue}${food.unit}`,
						image: food.image,
						time: this.getCurrentTime()
					};
					this.todayRecords.push(newRecord);
					this.currentCalories += newRecord.calories;
					uni.setStorageSync('todayRecords', JSON.stringify(this.todayRecords));
					
					// 同时保存到历史数据中
					this.saveToHistory(newRecord);
					this.hideAddPanel();
				}
			},
			getCurrentTime() {
				const now = new Date();
				return `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
			},
			saveToHistory(foodRecord) {
				const today = new Date();
				const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
				// 获取历史数据
				let historyData = {};
				const raw = uni.getStorageSync('historyData');
				if (raw) {
					try {
						historyData = JSON.parse(raw);
					} catch (e) {
						historyData = {};
					}
				}
				// 如果当天没有数据，初始化
				if (!historyData[dateStr]) {
					historyData[dateStr] = {
						calories: 0,
						foods: []
					};
				}
				// 添加食物记录
				historyData[dateStr].foods.push(foodRecord);
				historyData[dateStr].calories += foodRecord.calories;
				// 保存到本地存储
				uni.setStorageSync('historyData', JSON.stringify(historyData));
				// 调试信息
				console.log('保存历史数据:', dateStr, historyData[dateStr]);
			},
			deleteFromHistory(foodRecord) {
				const today = new Date();
				const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
				// 获取历史数据
				let historyData = {};
				const raw = uni.getStorageSync('historyData');
				if (raw) {
					try {
						historyData = JSON.parse(raw);
					} catch (e) {
						historyData = {};
					}
				}
				if (historyData[dateStr]) {
					// 找到并删除对应的食物记录
					const foodIndex = historyData[dateStr].foods.findIndex(food => 
						food.name === foodRecord.name && 
						food.calories === foodRecord.calories && 
						food.time === foodRecord.time
					);
					if (foodIndex !== -1) {
						historyData[dateStr].foods.splice(foodIndex, 1);
						historyData[dateStr].calories -= foodRecord.calories;
						// 如果当天没有食物记录了，删除当天的数据
						if (historyData[dateStr].foods.length === 0) {
							delete historyData[dateStr];
						}
						// 保存到本地存储
						uni.setStorageSync('historyData', JSON.stringify(historyData));
					}
				}
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		display: flex;
		flex-direction: column;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	/* 顶部进度区 */
	.header-section {
		padding: 40rpx 32rpx;
		background: #fff;
		border-radius: 0 0 32rpx 32rpx;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	}

	.date-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.date-text {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.progress-circle {
		display: flex;
		justify-content: center;
		margin-bottom: 32rpx;
	}

	.circle-bg {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		background: #f0f0f0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: conic-gradient(from 0deg, #4CAF50 0deg, #81C784 180deg, #f0f0f0 180deg);
		transform-origin: center;
	}

	.circle-inner {
		position: relative;
		z-index: 2;
		text-align: center;
		background: #fff;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.current-calories {
		font-size: 28px;
		font-weight: bold;
		color: #4CAF50;
	}

	.target-calories {
		font-size: 14px;
		color: #666;
		margin-top: 8rpx;
	}

	.remaining-calories {
		text-align: center;
	}

	.remaining-text {
		font-size: 16px;
		color: #666;
	}

	/* 内容区 */
	.content-section {
		flex: 1;
		padding: 32rpx;
		overflow: auto;
	}

	.chart-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}

	.card-header {
		margin-bottom: 24rpx;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.chart-scroll {
		width: 100%;
		overflow: auto;
	}

	.chart-container {
		display: flex;
		gap: 24rpx;
		padding: 16rpx 0;
		min-width: 100%;
	}

	.chart-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 80rpx;
	}

	.chart-bar {
		width: 32rpx;
		height: 120rpx;
		background: #f0f0f0;
		border-radius: 16rpx;
		position: relative;
		margin-bottom: 16rpx;
	}

	.bar-fill {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: linear-gradient(180deg, #4CAF50 0%, #81C784 100%);
		border-radius: 16rpx;
		min-height: 8rpx;
	}

	.chart-date {
		font-size: 12px;
		color: #666;
		margin-bottom: 4rpx;
	}

	.chart-value {
		font-size: 12px;
		color: #333;
		font-weight: 500;
	}

	.food-records {
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.record-count {
		font-size: 14px;
		color: #666;
	}

	.food-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.food-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		gap: 24rpx;
	}

	.food-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.food-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.food-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.food-portion {
		font-size: 14px;
		color: #666;
	}

	.food-time {
		font-size: 12px;
		color: #999;
	}

	.food-calories {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-right: 16rpx;
	}

	.calories-value {
		font-size: 18px;
		font-weight: bold;
		color: #4CAF50;
	}

	.calories-unit {
		font-size: 12px;
		color: #666;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 0;
		gap: 24rpx;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
	}

	/* 底部操作栏 */
	.bottom-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 32rpx;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.bar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		text-decoration: none;
	}

	.bar-text {
		font-size: 12px;
		color: #666;
	}

	.add-button {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
	}

	/* 添加面板 */
	.add-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		max-height: 80%;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 1000;
		overflow: hidden;
	}

	.add-panel.show {
		transform: translateY(0);
	}

	.panel-header {
		flex-shrink: 0;
		position: sticky;
		top: 0;
		z-index: 2;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.scroll-content {
		flex: 1 1 auto;
		overflow-y: auto;
		min-height: 0;
	}

	.panel-footer {
		flex-shrink: 0;
		padding: 24rpx 32rpx;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		position: sticky;
		bottom: 0;
		z-index: 2;
	}

	.portion-section .confirm-btn {
		display: none;
	}

	.panel-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.search-section {
		padding: 32rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 16rpx;
		padding: 24rpx;
		gap: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.quick-foods {
		padding: 0 32rpx 32rpx;
	}

	.section-subtitle {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 24rpx;
		display: block;
	}

	.food-categories {
		padding: 0 32rpx 32rpx;
	}

	.category-section {
		margin-bottom: 40rpx;
	}

	.food-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24rpx;
		margin-bottom: 16rpx;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		gap: 12rpx;
	}

	.grid-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
	}

	.grid-name {
		font-size: 14px;
		font-weight: 500;
		color: #333;
	}

	.grid-calories {
		font-size: 12px;
		color: #666;
	}

	.portion-section {
		padding: 32rpx;
		border-top: 1px solid #f0f0f0;
	}

	.portion-control {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.portion-label {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.portion-slider {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.slider {
		width: 100%;
	}

	.portion-value {
		font-size: 14px;
		color: #666;
		text-align: center;
	}

	.confirm-btn {
		background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: 999;
	}

	.overlay.show {
		opacity: 1;
		visibility: visible;
	}
</style>